{extend name="layout/layout"}
{block name="content"}
<main class="active">
    <div class="head_a1">
        <div class="layui-main">
            <div class="b1">
                <div class="t1">步驟二：票券設定( 票券設定 )</div>
                <a href="/" class="back_btn"><img src="__ROOT__/public/activity/images/out.png">返回首页</a>
            </div>
        </div>
    </div>
    <div class="main_a">
        <div class="layui-main">
            <div class="active_w active3 ">
                <div class="d-flex jc-s al-c">
                    <div></div>
                    <p class="text-align-center ft18 mb18 ft-bold">開始為你的票券設定分組吧！</p>
                    <a href="active11.html" class="gary_c6 ft14 d-flex al-c">略過此步驟<i style="width: 0.16rem;"
                            class="img_box ml5">
                            <img src="__ROOT__/public/activity/images/next.jpg"></i></a>
                </div>
                <p class="mb30 text-align-center ft14 gary_c9">票券分組可以將票券分類歸納，依據時間或地點分組管理；消費者在購票頁面中更容易選購！</p>
                <from class="layui-form">
                    <div class="content">
                        <div class="d-flex jc-fe mb20">
                            <div class="orange_c mr10" data-btn="add"><i
                                    class="layui-icon mr5 layui-icon-add-circle-fine"></i>新增
                            </div>
                            <div data-btn="delete" class="orange_c"><i
                                    class="layui-icon mr5 layui-icon-delete"></i>删除分组</div>
                        </div>
              
                        <table class="layui-table a9_table" lay-skin="line">
                            <colgroup>
                                <col>
                                <col width="150">
                                <col width="150">
                                <col width="150">
                                <col width="150">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th><input id="selectAll" lay-filter="selectAll" type="checkbox">票券分組名稱</th>
                                    <th>票券名稱</th>
                                    <th>票券數量</th>
                                    <th>票價</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {if isset($group) &&  count($group)} 
                                    {volist name="group" id="vo"} 
                                    <tr data-key="{$i}">
                                        <td class="d-flex al-c">
                                            <input type="checkbox"  name="group_item">
                                            <p>{$vo.group_name}</p>
                                        </td>
                                        <td>{$vo.group_ticket}</td>
                                        <td>{$vo.group_number}</td>
                                        <td>{$vo.group_price}</td>
                                        <td style="cursor:pointer" data-id="{$i}"  data-detail="{$vo|json_encode}" class="group_detail">
                                            <div class="d-flex ">
                                                <div class="orange_c mr10"><i
                                                        class="layui-icon mr5 layui-icon-list" ></i>查看详情
                                                </div>

                                            </div>
                                        </td>
                                    </tr>
                                    
                                {/volist}
                                {/if}
                            </tbody>
                        </table>
                    </div>
                    <div class="mt100 d-flex jc-s al-c">
                        <a href="/activity/create/ticket.html" class="last-btn">
                            <img src="__ROOT__/public/activity/images/out1.png">返回上一步
                        </a>
                        <a href="/activity/create/diyform.html">
                            <button class="layui-btn layui-bg-orange next-btn">下一步</button>
                        </a>
                    </div>
                </from>
            </div>

        </div>
    </div>
</main>
<div class="layui-hide">
    <div class="addhtml ">
        <div class="active_w active8 ">
            <form class="layui-form" lay-filter="add-form" onsubmit="return false;">
                <div class="layui-form-item">
                    <div class="label must">票券分組名稱</div>
                    <div class="">
                        <input type="text" name="group_name"  lay-verify="required" placeholder="请填写票券分組名稱"
                               autocomplete="off" class="layui-input aaa">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label must">票券名稱</div>
                    <div class="">
                      <select  name="group_ticket" lay-verify="required" lay-filter="ticket">
                          <option value="">選擇票券</option>
                          {if isset($tickets.tickets)} 
                            {volist name="tickets.tickets" id="vo"} 
                                <option value="{$vo.name}"  data-key="{$i}" data-price="{$vo.price}">{$vo.name}({$vo.quantity})</option>
                            {/volist}
                          {/if}
                       
                      </select>
                    </div>
                  </div>
                  <div class="layui-form-item layui-hide">
                    
                    <div class="">
                        <input type="text"  name="selected_ticket_key" 
                               autocomplete="off" class="layui-input selected_ticket_key">
                    </div>
                </div>


       
                <div class="layui-form-item">
                    <div class="label must">票券數量
                    </div>
                    <div class="">
                        <input type="number" name="group_number"  min="1" lay-verify="required" placeholder="请填写票券數量"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">票價
                    </div>
                    <div class="">
                        <input type="text"  name="group_price" lay-verify="required" placeholder="请填写票價"
                               autocomplete="off" class="layui-input priceInput">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">票券說明
                    </div>
                    <div class="">
                        <textarea lay-verify="required"  name="group_desc"  class="layui-textarea"
                                          style="min-height: 2rem;" placeholder="请输入票券說明" name="desc"
                        ></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">是否為審核票？<p class="tip1">凡購買此票券都需要經過您的審核</p>

                        <div>
                            <input type="radio" name="group_is_verify" value="0" title="否" checked> 
                            <input type="radio" name="group_is_verify" value="1" title="是，都經過我審核">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">是否開賣？

                    </div>
                    <div>
                        <input type="radio" name="group_is_open" value="1" title="發售，活動上架後立即開賣" checked>
                        <input type="radio" name="group_is_open" value="0" title="停售，該票券暫停對外銷售，並從購票頁中隱藏">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">售票時間<p class=" tip1">開始時間</p>
                    </div>
                    <div class="d-flex">
                        <input type="text" id="sale_begin" name="group_sale_begin" 
                               lay-verify="required"
                               placeholder="请填写開始時間" autocomplete="off" class="layui-input sale-time-input sale_begin">

                    </div>
                    <p class=" tip1 mb10">結束時間</p>
                    <div class="d-flex">
                        <input type="text" name="group_sale_end"  value="{$vo.sale_end|default=''}"
                               lay-verify="required"
                               placeholder="请填写結束時間" autocomplete="off" class="layui-input sale-time-input sale_end">

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">有效時間(可驗票時間)<p class="tip1">有效時間為可驗票入場的時間，系統自動提前兩小時開放給主辦方現場測試。
                        </p>

                        <div class="mb20">
                            <input type="radio" lay-filter="timeset" value="1"  title="有效時間建議設定為活動時間">
                        </div>
                        <p class=" tip1">開始時間</p>
                    </div>
                    <div class="d-flex">
                        <input id="datetime-1" type="text" name="group_yx_start_time" lay-verify="required"
                            placeholder="请填写開始時間" autocomplete="off" class="layui-input yx_start_time">

                    </div>
                    <p class=" tip1 mb10">結束時間</p>
                    <div class="d-flex">
                        <input id="datetime-1" type="text" name="group_yx_end_time" lay-verify="required"
                            placeholder="请填写結束時間" autocomplete="off" class="layui-input yx_end_time">

                    </div>
                    <div class="mt40 d-flex jc-c al-c">
                        <button class="layui-btn layui-bg-orange next-btn">新增</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="flex-column-center">

        </div>

    </div>
</div>

<script>
	layui.use(function () {
		var upload = layui.upload;
		var layer = layui.layer;
		var element = layui.element;
		var $ = layui.$;
		var laydate = layui.laydate;
        var form   = layui.form;
		laydate.render({
			elem: '#datetime-1',
			type: 'datetime',
			fullPanel: true // 2.8+
		});
        form.on('checkbox(selectAll)', function(data){
            if(data.elem.checked == true){
                $('input[name="group_item"]').prop('checked', true);
                form.render();
            }else{
                $('input[name="group_item"]').prop('checked', false);
                form.render();
            }

           
        });
     
	})
 
 

	var addhtml = $('.addhtml')[0].outerHTML;
    $(document).on('click', '.group_detail', function () {
        const id          = $(this).data('id');
        var detailData   = $(this).data('detail');
        console.log(detailData);
        // 生成详情介绍内容
        var detailContent = `
            <div class="a10_b1">
                <div class="item">
                    <p class="t1">票券分組名稱</p>
                    <p class="t2">${detailData.group_name ? detailData.group_name : ''}</p>
                </div>
                <div class="item">
                    <p class="t1">票券名稱</p>
                    <p class="t2">${detailData.group_ticket ? detailData.group_ticket : ''}</p>
                </div>
                <div class="item">
                    <p class="t1">票券數量</p>
                    <p class="t2">${detailData.group_number ? detailData.group_number : ''}</p>
                </div>
                <div class="item">
                    <p class="t1">票券價格</p>
                    <p class="t2">${detailData.group_price ? detailData.group_price : ''}</p>
                </div>
                <div class="item">
                    <p class="t1">票券說明</p>
                    <p class="t2">${detailData.group_desc ? detailData.group_desc : ''}</p>
                </div>
                <div class="item">
                    <p class="t1">是否為審核票？</p>
                    <p class="t2">${detailData.group_is_verify == 1 ? '是' : '否'}</p>
                </div>
                <div class="item">
                    <p class="t1">是否開賣？</p>
                    <p class="t2">${detailData.group_is_sale == 1 ? '是' : '否'} </p>
                </div>
                <div class="item">
                    <p class="t1">售票时间</p>
                    <p class="t2">${detailData.group_sale_begin} - ${detailData.group_sale_end} </p>
                </div>
                <div class="item">
                    <p class="t1">有效時間(可驗票時間)</p>
                    <p class="t2">${detailData.group_yx_start_time} - ${detailData.group_yx_end_time}</p>
                </div>
            </div>
        `;

        // 弹出详情介绍
        layer.open({
            type: 1,
            title: false,
            area: ['900px', '80%'],
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            anim: 0, // 0-6 的动画形式，-1 不开启
            content: detailContent
        });
        // console.log( detail_json);
        // layer.open({
        //         type: 1, // page 层类型
        //         area: ['900px', '80%'],
        //         title: false,
        //         shade: 0.6, // 遮罩透明度
        //         shadeClose: true, // 点击遮罩区域，关闭弹层
        //         anim: 0, // 0-6 的动画形式，-1 不开启
        //         content: addhtml,
        //         success(elem) {
        //             var form = layui.form;
        //              var laydate = layui.laydate;
                       
        //          laydate.render({
        //                 elem: '.sale-time-input',
        //                 type: 'datetime',
        //                 fullPanel: true, // 2.8+
        //                 min:getCurrentTimeInYMDHMSFormat()
        //             });
        //             var laydate = layui.laydate;
        //             laydate.render({
        //                 elem: '#datetime-1',
        //                 type: 'datetime',
        //                 fullPanel: true, // 2.8+
        //                 min:getCurrentTimeInYMDHMSFormat()
        //             });
        //             form.val('add-form',detail_json);
        //             form.render();
        //             var addForm = elem.find('.layui-form');
        //             addForm.on('submit', function () {
        //                 var data = layui.form.val('add-form');
        //                 data.id = id;
        //                 $.quickPost('{:url("/activity/create/group")}?type=edit', data).done((res) => {
        //                     location.reload();
        //                 })
        //                 return false;
        //             })
        //         }
        // })
    })
	$(document).on('click', '[data-btn="add"]', function () {
   
        layer.open({
                type: 1, // page 层类型
                area: ['900px', '80%'],
                title: false,
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: addhtml,
                success(elem) {
                    var form = layui.form;
                   var laydate = layui.laydate;
                       
                 laydate.render({
                        elem: '.sale-time-input',
                        type: 'datetime',
                        fullPanel: true, // 2.8+
                        min:getCurrentTimeInYMDHMSFormat()
                    });
                    var laydate = layui.laydate;
                    laydate.render({
                        elem: '#datetime-1',
                        type: 'datetime',
                        fullPanel: true, // 2.8+
                        min:getCurrentTimeInYMDHMSFormat()
                    });
                    form.render();
                    form.on('select(ticket)', function(data){
                            var selectedOption = $(data.elem).find(':selected');
                            var price = selectedOption.data('price');
                            $('.selected_ticket_key').val(selectedOption.data('key'));
                            // 给另一个 input 元素赋值
                                $('.priceInput').val(price);
                                // 触发 layui 的表单重新渲染
                                form.render();
                            })
                    form.on('radio(timeset)', function(data){
                        if(data.value == 1){
                            form_data = form.val('add-form');
                            form.val('add-form',{
                                'group_yx_start_time' : form_data.group_sale_begin,
                                'group_yx_end_time' : form_data.group_sale_end
                            })
                            form.render();
                        }

                    });
                    //表单提交
                    var addForm = elem.find('.layui-form');
                    addForm.on('submit', function () {
                        var data = layui.form.val('add-form');
                   
                        $.quickPost('{:url("/activity/create/group")}?type=add', data).done((res) => {
                            location.reload();
                        })
                        return false;
                    })

                }
            });
	})
	$(document).on('click', '[data-a9-btn]', function () {
		$('[data-a9-btn]').remove()
		$('.show-block').removeClass('layui-hide')

	}).on('click', '[data-btn="delete"]', function () {
		layer.confirm('確定删除？', {
			btn: ['確定', '取消'], //按钮
            title:'注意'
		}, function () {
            var selectedKeys = [];
            $('input[name="group_item"]:checked').each(function(){
                var key = $(this).closest('tr').data('key');
                selectedKeys.push(key-1);
            });
            if(selectedKeys.length == 0 ){
               return layer.msg('至少請選擇一個分組');
            }
            var data = selectedKeys.join(',');
            $.quickPost('{:url("/activity/create/group")}?type=delete', {ids:data}).done((res) => {
                location.reload();
            })
            return false;
		}, function () {

		});
	})

    function getCurrentTimeInYMDHMSFormat() {
        const now = new Date();

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0'); // 注意月份是从0开始的，所以需要加1
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
</script>
{/block}